<!--  -->
<template>
  <div class="title">
    <div class="regisinfo">
      <!-- 图片上传 -->
      <div class="img">
        <van-uploader
          :max-count="1"
          v-model="fileList"
          :after-read="afterRead"
        />
      </div>
      <!-- 注册表单 -->
      <div class="info">
        <div class="box">
          <van-icon name="manager-o" class="icon" size="20" />
          <van-field
            v-model="data.username"
            class="txtinput"
            type="tel"
            placeholder="请输入账号"
          />
        </div>
        <div class="box">
          <van-icon name="phone-o" class="icon" size="20" />
          <van-field
            v-model="data.phone"
            class="txtinput"
            type="tel"
            placeholder="请输入手机号"
          />
        </div>
         <div class="box">
          <van-icon name="envelop-o" class="icon" size="20" />
          <van-field
            v-model="myemail"
            class="txtinput"
            type="tel"
            placeholder="请输入邮箱账号"
          />
        </div>
        <div class="box">
          <van-icon class="icon" name="comment-circle-o" size="20" />
          <van-field
            class="txtinput"
            center
            v-model="email"
            @blur="EmailCheck"
            clearable
            placeholder="请输入邮箱验证码"
          >
            <template #button>
              <van-button
                class="btnget"
                @click="EmailSend"
                size="small"
                type="primary"
                ><span v-if="emailTime"> 点击获取 </span>
                <span v-else>
                  <van-count-down :time="time">
                    <template #default="timeData">
                       <span class="block">{{ timeData.minutes }}</span>
                      <span class="colon">:</span>
                      <span class="block">{{ timeData.seconds }}</span>
                    </template>
                  </van-count-down>
                </span>
              </van-button>
            </template>
          </van-field>
        </div>
        <div class="box">
          <van-icon name="friends-o" size="20" class="icon" />
          <van-radio-group
            class="txtinput"
            v-model="data.gendar"
            direction="horizontal"
          >
            <van-radio name="0">男</van-radio>
            <van-radio name="1">女</van-radio>
          </van-radio-group>
        </div>
        <div class="box">
          <van-icon name="bag-o" class="icon" size="20" />
          <van-field
            v-model="data.pwd"
            class="txtinput"
            type="password"
            placeholder="请输入你的密码"
          />
        </div>
        <div class="box">
          <van-icon name="bag-o" class="icon" size="20" />
          <van-field
            v-model="data.qurPwd"
            class="txtinput"
            type="password"
            placeholder="请确认你的密码"
          />
        </div>
      </div>
    </div>
    <div>
      <van-button class="btnregister" round type="info" @click="btnSubmit">确定</van-button>
       <div class="register">
      <router-link to='/login' tag='a'>登录</router-link>
    </div>
    </div>
  </div>
</template>

<script>
import request from "../network/request.js";
import { Dialog, Toast } from "vant";
import {
  RegUpImg,
  RegEmail,
  RegEmailCheck,
  RegClick,
} from "@/network/register/register.js";
import { ContactList } from "vant";
export default {
  data() {
    return {
      //图片上传的显示
      fileList: [],
      data: {
        username: "",
        gendar: 1,
        phone: "",
        pwd: "",
        imgurl: "",
        qurPwd: "",
      },
      //填写的邮箱验证码
      myemail:'',
      email: "",
      emailTime: true,
      time: 1000 * 60*3,
      isEmailTrue: false,
    };
  },
  methods: {
    async afterRead(file) {
      let formData = new FormData();
      formData.append("file", file.file);
      const { data: res } = await RegUpImg(formData);
      console.log(res);
      //上传失败
      if (!res.Success) {
        setTimeout(() => {
          file.status = "failed";
          file.message = "上传失败";
        }, 1000);
      } else {
        this.data.imgurl = res.SaveName;
      }
    },
    //发送邮箱
    async EmailSend() {
      const res = await RegEmail({ email: this.myemail });
      this.emailTime = false;
      setInterval(() => {
        this.emailTime = true;
      }, 1000 * 60*3);
    },
    //邮箱的验证
    async EmailCheck() {
      const { data: res } = await RegEmailCheck({
        email: this.myemail,
        code: this.email,
      });
      if (res.message != "验证成功") {
          Toast(res.message);
        this.isEmailTrue = false;
      } else {
        this.isEmailTrue = true;
      }
    },
    //点击注册
    async btnSubmit() {
      if (this.isEmailTrue) {
        //邮箱验证是否通过
        if(this.data.pwd!=this.data.qurPwd) return Toast.fail("两次密码不一致");
        const { data: res } = await RegClick({
          data: JSON.stringify(this.data),
        });
        if (res.message !== "success") {
          Dialog.alert({
            message: res.message,
            theme: "round-button",
          }).then(() => {});
        } else {
          Toast.success("注册成功请登录");
          this.$router.replace("/login");
        }
      } else {
        Toast.fail("验证码错误");
      }
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang="less" scoped>
@import "../assets/css/index.less";
@vw: 0.06666vw;

.title {
  display: flex;
  width: 100vm;
  height: 3360 * @vw;
  background-color: #f5f5f5;
  flex-wrap: wrap;
  .regisinfo {
    width: 100vm;

    background-color: #ffffff;
    margin: 100 * @vw auto;
    border-radius: 40 * @vw;
    .img {
      width: 100vm;
      display: flex;
      justify-content: center;
      margin: 0 auto;
    }
    .info {
      width: 100vm;
      flex-wrap: wrap;
      margin-left: 20 * @vw;
      margin: 0 * @vw auto;
      .box {
        width: 1383 * @vw;
        height: 217 * @vw;
        display: flex;
        position: relative;
        .icon {
          // float: left;
          top: 3.3331vw;
          margin-left: 20 * @vw;
        }
        .txtinput {
          // width: 1191 * @vw;
          // float: left;
          margin-left: 10 * @vw;
        }
        .btnget {
          background-color: white;
          color: #dcb884;
          border-style: hidden;
        }
      }
    }
  }

  .btnregister {
    width: 1146 * @vw;
    height: 178 * @vw;
    background-color: #dcb884;
    border-style: hidden;
    margin: 100 * @vw 177 * @vw;
  }
}
.colon {
  display: inline-block;
  margin: 0 4px;
  color: #ee0a24;
}
.block {
  display: inline-block;
  width: 22px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  border-radius: 12 * @vw;
  background-color: #ee0a24;
}
.register {
  margin-top: 700 * @vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #477bff;
}
.register a {
  font-size: 0.28rem;
  letter-spacing: 0.01rem;
}
.register span {
  padding: 0 0.15rem;
  font-size: 0.18rem;
}
</style>